<script>
  // 侧边栏导航 2018/3/1 17:03 zhangQ
  import currentRouters from './main'
  import { mapGetters } from 'vuex'
  import _ from 'lodash'

  export default {
    name: 'sidebarMenu',
    data () {
      let matchedCone = this.$route.matched
      let OpenNames = []
      for (let i = 0, leni = matchedCone.length; i < leni; i++) {
        if (i !== 0 && i !== leni - 1) {
          OpenNames.push(matchedCone[i].name)
        }
      }
      let datas = { OpenNames }
      return datas
    },
    props: {
      isCollapsed: {
        type: Boolean,
        default: false
      }
    },
    render (h) {
      let routersJXS = currentRouters.map((item) => {
        let power = _.find(this.currentUser.permission, { 'name': String(item.name), 'type': '2' })
        if (power && item.children && item.children.length > 0) {
          return this.getMenuItem(item.children)
        }
      })
      return (
        <i-menu active-name={ this.activeMenu } theme="dark" width="auto" class={ this.menuitemClasses } on-on-select={ this.menuItemSelect } accordion={ true } open-names={ this.OpenNames }>
          { routersJXS }
        </i-menu>)
    },
    computed: {
      ...mapGetters(['currentUser', 'activeMenu']),
      menuitemClasses () {
        return [
          'menu-item',
          this.isCollapsed ? 'collapsed-menu' : ''
        ]
      }
    },
    methods: {
      getMenuItem (routerObj) {
        return routerObj.map((router) => {
          // 得到有效的children（hidden: true是隐藏的，不是有效的）
          router.children = _.filter(router.children, (item) => {
            return !item.hidden
          })
          let power = _.find(this.currentUser.permission, { 'name': String(router.name), 'type': '2' })
          if (!power) {
            return
          }
          if (router.children && router.children.length > 0) {
            return <submenu name={ router.name }>
              <template slot="title">
                <icon type={ power.icon ? power.icon : 'android-list' }></icon>
                { power.title ? power.title : router.meta.title }
              </template>
              { this.getMenuItem(router.children) }
            </submenu>
          } else {
            return (<menu-item name={ router.name }>
              <icon type={ power.icon ? power.icon : 'android-list' }></icon>
              <span>{ power.title ? power.title : router.meta.title }</span>
            </menu-item>)
          }
        })
      },
      menuItemSelect (name) {
        this.aa = name
        console.log('name', name)
        this.$router.push({ name: name })
      }
    },
    mounted () {
    },
    components: {}
  }
</script>
<style scoped>
  .menu-item span {
    display: inline-block;
    width: 69px;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
    transition: width .2s ease .2s;
  }

  .menu-item i {
    transform: translateX(0px);
    transition: font-size .2s ease, transform .2s ease;
    vertical-align: middle;
    font-size: 16px;
  }

  .collapsed-menu {
    display: none;
    transition: width .0s ease .3s;
  }

  /*.collapsed-menu span {*/
  /*width: 0px;*/
  /*transition: width .2s ease;*/
  /*}*/

  /*.collapsed-menu i {*/
  /*transform: translateX(5px);*/
  /*transition: font-size .2s ease .2s, transform .2s ease .2s;*/
  /*vertical-align: middle;*/
  /*font-size: 22px;*/
  /*}*/


</style>
